<template>
    <!-- 张权 2023年4月3日 09点49分 -->
    <!-- 导航栏 -->
    <div id="NavigationBar">
        <div id="div2">
            <el-row>
                <!-- logo -->
                <el-col style="margin-left:100px;" :span="5">
						<img @click="clickRlink('/index')" id="img1" :src="`${$imageUrl}?id=` + dynamicState.logoImg">
                </el-col>
                <!-- 标题 -->
                <!-- <el-col :span="4" style="overflow: hidden;">
                    <p id="p1">{{dynamicState.logoText}}</p>
                </el-col> -->
                <!-- 内容 -->
                <el-col :span="9" style="margin-left:50px">
                    <ul id="ul1">
                        <li
                            v-for="(item, index) in liData"
                            :id="item.router"
                            class="rlink_li"
                            @click="clickRlink(item.router)"
                            :key="index">
                            <!-- <router-link class="rlink1" :to="{ path: item.router }" >{{item.txt}}</router-link> -->
                            {{item.txt}}
                        </li>
                    </ul>
                </el-col>
                <!-- 用户登录注册 -->
                <el-col :span="5">
                    <div v-if="disPlay">
                        <el-dropdown>
                            <span class="el-dropdown-link">
                                <img :src="`${avatarUrl}`" id="img3" @click="getPersonal">
                            </span> 
                            <span>
                                <p id="nickName">{{nickName}}</p>
                            </span>
                            <el-dropdown-menu slot="dropdown" style="margin-right:60px">
                                <el-dropdown-item><p @click="getPersonal">个人主页</p></el-dropdown-item>
                                <el-dropdown-item ><p @click="quit">退出登录</p></el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div v-else>
                        <!-- <button id="button1">注册</button> -->
                        <p id="p2" @click="login">登录</p>
                    </div>
                </el-col>
                <!-- 购物车 -->
                <el-col :span="2">
                    <div id="img2" @click="getShoppingCart"></div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      // 导航栏信息
      liData: [
        {
          txt: '主页',
          router: '/index'
        },
        {
          txt: '分类',  
          router: '/pageClassify'
        },
        {
          txt: 'DIY',
          router: '/DIYIndex'
        }
        // {
        //   txt: '动态',
        //   router: '/dynamic'
        // }
      ],
      // 切换登录前后的状态
      disPlay: sessionStorage.getItem("token"),
      // 用户id
      userId:'',
      // 存放token
      token: '',
      // 存放用户头像
      avatarUrl:'',
      // 存放用户姓名
      nickName:'',
      // 选中样式
      routerClass: 'routerClass',
      // 主题
      dynamicState: {},
    }
  },
  watch : {
    disPlay(oldData, newData){
    }
  },
  	mounted () {
		// 从头部拿用户id
		this.userId = sessionStorage.getItem("userId") 
		// 从头部拿token
		this.token = sessionStorage.getItem('token')
		// 获取主题
		this.dynamicStateByState()
		// 根据用户id获取用户信息
		this.getUserListByUserId()
		// 刷新token
		this.updateToken()
  },
  methods: {
    // 点击修改导航栏背景颜色
    clickRlink (toRouter) {
        sessionStorage.setItem("menu", toRouter)
        // 初始化导航栏背景颜色
        this.liData.forEach((item,index) => {
            document.getElementById(item.router).style.backgroundColor = 'transparent'
        })
        // document.getElementById('rlink' + i).style.backgroundColor = '#fffbae'
        document.getElementById(toRouter).style.backgroundColor = '#fffbae'
        this.$router.push(toRouter)
    },
    // 根据用户id获取用户信息
    getUserListByUserId(){
        this.$axios.get('/userLogin/getUserListByUserId?id=' + this.userId).then(res => {
            if(res.data.flag){
                this.avatarUrl = res.data.data.avatarUrl
                this.nickName = res.data.data.nickName
            }
        })
    },
    // 获取主题信息
    dynamicStateByState () {
        this.$axios.get('/dynamicState/dynamicStateByState').then(res => {
            if (res.data.flag) {
                this.dynamicState = res.data.data
            }else{
                this.message('error', res.data.data)
            }
        }).catch(err => {
            console.log(err)
        })
    },
    // 去登录页面
    login(){
        this.$router.push('/Login')
    },
    // 刷新token
    updateToken() {// 获取token令牌
        var token = sessionStorage.getItem('token')
        if (token == null) {
            this.disPlay = false
        } else {
            this.disPlay = true
            
        }
    },
    // 点击退出功能
    quit(){
        this.message('退出成功', 'success')
        window.sessionStorage.removeItem('token')
        window.sessionStorage.removeItem('userId')
        this.$router.go(0)
        this.updateToken()
    },
    getShoppingCart () {
        if (this.token !== null) {
            this.$router.push('/shoppingCart')
        } else {
            this.message('请先登录','error')
        }
    },
    getPersonal () {
        this.$router.push('/personal')
    },
    //消息提示框
    message(message,type){
        this.$message({
            message:message,
            type: type
        });
    },
  }
}
</script>

<style scoped>
    /deep/ .el-dropdown{
        width: 100%;
        height: 100%;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
    #button1{
        width: 76px;
        height: 32px;
        margin-top: 14px;
        font-size: 16px;
        color: #fff;
        background-color: #222;
        border-radius: 8px;
        float: right;
        cursor:pointer;
        margin-left: 32px;
        border: none;
    }
    #button1:hover{
        background-color: #4e4e4e;
    }
    #div2{
        flex: 100%;
        height: 60px;
        background: #FFF200;
    }
    #img3{
        width: 40px;
        height: 40px;
        display: block;
        border-radius: 50%;
        float: left;
        margin-left: 180px;
        margin-top: 10px;
    }
    #nickName{
        width: 110px;
        height: 40px;
        display: block;
        float: left;
        line-height: 2;
        margin-left: 14px;
        margin-top: 10px;
        font-size: 16px;
    }
    #img2{
        width: 30px;
        height: 30px;
        margin: auto;
        margin-top: 15px;
        background-image: url('../../assets/image/shopping.png');
        background-position: none;
        background-size: 100%;
        cursor:pointer;
    }
    #img2:hover{
        background-image: url('../../assets/image/shopping1.png');
        background-position: none;
        background-size: 100%;
        cursor:pointer;
    }
    #img1{
        width: 100px;
        height: 50px;
        margin: 0 auto;
        margin: 3px 44px;
		cursor: pointer;
    }
    #p1{
		width: 281px;
        float: left;
        line-height: 60px;
        margin: 0;
    }
    #p2:hover{
        cursor:pointer;
        color: #4e4e4e;
    }
    #p2{
        text-align: right;
        line-height: 60px;
        margin: 0;
        cursor:pointer;
        float: right;
    }
    #p3{
        text-align: center;
        line-height: 60px;
        margin: 0;
        cursor:pointer;
    }
    #ul1{
        width: 500px;
        height:60px;
        margin: 0 20px;
        list-style-type: none;
        margin: auto;
        padding: 0;
    }
    #ul1 li{
        width: 33%;
        height: 100%;
        line-height: 60px;
        text-align: center;
        float: left;
        font-size: 18px;
        cursor:pointer;
    }
    .rlink1:hover{
        cursor:pointer;
        color: #4e4e4e;
    }
    .rlink1 {
        text-decoration: none;
        color: black;
    }
</style>
